<!doctype html> 
<meta charset = "utf-8"> 
<title>Texture atlas buttons</title>
<body>
<script src="../ga.js"></script>
<script>

//Create a new GA instance, and start it.
//Pre-load images in the array.
var g = ga(
  256, 256, setup, 
  [
    "images/button2.json",
    "fonts/puzzler.otf"
  ]
);
g.start();

//Declare global sprites, objects, and variables
//that you want to access in all the game functions and states

var button, stateMessage, actionMessage;

//A `setup` function that will run only once.
//Use it for initialization tasks
function setup() {

  g.backgroundColor = "white";
  g.canvas.style.border = "1px black dashed";

  /*
  The easier way to make a button is to use a texture atlas. Create an
  array that lists the id names of each frame in the atlas, and then
  initialize the sprite using that array.
  */

  var buttonFrames = ["up.png", "over.png", "down.png"];

  //Make a `button` using the frames.
  button = g.button(buttonFrames);

  //That's so easy!

  //Assign the button's `press` and `release` actions
  button.press = function() {
    console.log("pressed");
  };
  button.release = function() {
    console.log("released");
  };

  //Position the button
  button.x = g.canvas.width / 2 - 96;
  button.y = g.canvas.height / 2 - 48;

  //Some text to display the button's state and action
  stateMessage = g.text("State not set", "14px puzzler", "black");
  stateMessage.x = 12;
  stateMessage.y = 12;

  actionMessage = g.text("Action not set", "14px puzzler", "black");
  actionMessage.x = 12;
  actionMessage.y = 32;

  //Buttons remain interactive even if there's no game loop running.
  g.state = play;    
}

//The `play` function will run in a loop
function play() {
  stateMessage.content = "State: " + button.state;
  actionMessage.content = "Action: " + button.action;
}

</script>
</body>

